<template>
  <div id="targetQuery">
    <div class="homeTitle">
      <span>指标查阅(<span>当前查看行社\机构：{{bank}}</span>)</span> 
      <div>
        <el-button type="primary" size="small" @click="chooseOne">切换行社\机构</el-button>
        <el-button type="primary" size="small" @click="follow" >关注管理</el-button>
      </div>
    </div>
    <div class="targetContent">
      <div class="yilei" v-for="(item, index) in data" :key="index">
        <div class="targetTitle">{{item.type}}</div>
        <div class="targetCon">
          <div class="condetail" v-for="(ele, k) in item.list" :key="k" :class="[ele.attention? 'active':'']" @click="goDetail(ele)">
            <p :class="[ele.warnState ? 'red' : '']">{{ele.indicatorName}}</p>
            <p>{{(ele.nowValue-0).toFixed(2)}}%</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'targetQuery',
  data () {
    return {
      currentBank: 'XXXXXXXXXXXXXXXXXXXXXXXXX',
      data: [],
      bank: ''
    };
  },
  mounted () {
    this.getData ();
  },
  methods: {
    getData () {
      this.axios.get('bankIndicatorValue/selectByBankId',{params:{bankId: this.$route.query.id}})
        .then(({data})=>{
          if (data.code == 200) {
            this.data = data.data.IList;
            this.bank = this.$route.query.bank || data.data.bank;
          }
        })
    },
    follow() {
      this.$router.push({ path: "follow" });
    },
    goDetail (ele) {
      this.$router.push({path: 'followDetail', query: {bivId: ele.bivId}});
    },
    chooseOne () {
      this.$router.push('chooseOne');
    },
  }
};
</script>

<style lang="scss">
  #targetQuery {
    .homeTitle {
      display: flex;
      justify-content: space-between;
      .el-button {
        float: right;
        margin-right: 20px;
        margin-top: 14px;
      }
    }
    .targetContent {
      background: white;
      .targetTitle {
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        background-color: #cccccc;
      }
      .targetCon {
        padding: 20px;
        padding-right: 0;
        padding-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        .condetail {
          padding: 10px;
          border: 1px solid black;
          margin-right: 30px;
          margin-bottom: 20px;
          cursor: pointer;
          &.active {
            background-color: #0080C0;
          }
          p {
            text-align: center;
            &:last-child {
              color: orange;
            }
            &.red {
              color: red;
            }
          }
        }
      }
    }
  }
</style>